<template>
	<view class="center">
		<headTop></headTop>
		<h4>查看订单</h4>
		<view class="orderInfo">
			<span>{{orderNumber}}（订单号）</span>
			<p><span>{{createdTime}}（创建时间）</span><span>数量：{{allNumber}}</span></p>
		</view>
		<h4>布草信息</h4>

		<view class="table">
			<view class="tr">

				<view class="th th3">布草</view>
				<view class="th th3">数量</view>
				<view class="th th3">总计</view>
			</view>
			<!-- 注释部分为左滑操作组件，微信小程序例子中有 -->
			<!-- <mp-slideview wx:for="{{tableData}}" wx:key="index" show="{{false}}" buttons="{{slideButtons}}"
                bindbuttontap="slideButtonTap" data-index="{{item.id}}" data-num='{{item.number}}'> -->
			<scroll-view :style="{height:wh + 'px'}" scroll-y="true">
				<view class="tr" v-for="(item,index) in tableData" :key="index">
					<!-- <view class="td td1">
                    <view>{{index+1}}</view>
                  </view> -->
					<view class="td td3">{{""+item.linenTypeName+item.linenSizeName}}</view>
					<view class="td td3">{{item.num}}</view>
					<view class="td td3">{{item.num}}</view>

				</view>

				<view class="tr">
					<!-- <view class="td td1">
                    <view>{{index+1}}</view>
                  </view> -->
					<view class="td td3"></view>
					<view class="td td3"></view>
					<view class="td td3">{{allNumber}}</view>

				</view>

			</scroll-view>
			<!-- </mp-slideview> -->

		</view>

		<view class="contain-ten" v-if="orderSta">
			<button @click="back">返回</button>
			<button @click="comfirmReceipt" :disabled="canClick">确认收货</button>
		</view>
		<view class="contain-ten" v-else>
			<button @click="back">返回</button>
			<button :disabled="canClick" @click="returnOr">回退订单</button>
			<button @click="comfirmRecycling" :disabled="canClick">确认回收</button>
		</view>

	</view>
</template>

<script>
	import headTop from "@/components/common/headTop/headTop.vue";
	export default {
		data() {
			return {
				wh: 0,
				orderSta: true,
				canClick: true,
				orderStatus: '',
				orderId: '', //订单
				orderNumber: '',
				createdTime: '',
				tableData: [],
				isorder: '' //上一层 状态
			}
		},
		components: {
			headTop,
		},
		methods: {
			//确认收获之后跳转到其他页面
			comfirmReceipt() {
				this.$request.post('order/hotelConfirm', {
					'orderId': this.orderId
				}).then(res => {
					console.log(res)

					uni.reLaunch({
						url: "/pages/order/order/order?isorder=" + 2
					})
				})

			},
			returnOr() { //回退订单
				this.$request.post('order/hotelCncl', {
					'orderId': this.orderId
				}).then(res => {
					console.log(res)
					uni.reLaunch({
						url: "/pages/order/order/order?isorder=" + this.isorder
					})
				})

			},
			//确认回收
			comfirmRecycling() {

				this.$request.post('order/hotelConfirm', {
					'orderId': this.orderId
				}).then(res => {

					uni.reLaunch({
						url: "/pages/order/order/order?isorder=" + this.isorder
					})
				})
			},

			back() {
				uni.reLaunch({
					url: "/pages/order/order/order?isorder=" + this.isorder
				})
			},
			renderTime(date) {
				var dateee = new Date(date).toJSON();
				return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/,
					'')
			},
			getlist(id, status) {
				this.$request.get('order/getOrderById', {
					'orderId': id
				}).then(res => {
					this.orderNumber = res.data.orderSn
					this.createdTime = this.renderTime(res.data.createTime)
					if (status != 12) { //回收
						this.tableData = res.data.orderItem
					}
				})
			}
		},
		computed: {
			allNumber() {
				let numberSum = 0
				if (this.tableData && this.tableData.length > 0) {
					this.tableData.map(item => {
						numberSum += item.num
					})
					return numberSum
				} else {
					return 0
				}


			}
		},
		onLoad(option) {
			// console.log( option)

			this.orderId = option.id
			this.orderStatus = option.orderSta
			this.isorder = option.isorder
			// this.orderSta  =  option.orderSta == 10 ? false :true 
			if (option.orderSta == 13) { //代表是可回收    点击  会触发不同的事件
				console.log(14)
				this.orderSta = false
				this.canClick = false
			} else if (option.orderSta == 12) { //待回收  只显示订单号和创建时间  数量是0  归还订单不可以点击  
				this.orderSta = false
				this.canClick = true
				// this.canClick = true
			} else if (option.orderSta == 8) { //运输中  当订单状态是运输中   确认收获按钮   确认收获后  订单移动到  历史订单  自动生成回收订单
				this.orderSta = true
				this.canClick = false
			} else if (option.orderSta == 14) { //回收运输中  当订单状态是运输中   确认收获按钮   确认收获后  订单移动到  历史订单  自动生成回收订单
				this.orderSta = false
				this.canClick = true
			}
			this.getlist(option.id, this.orderStatus)
			let sys = uni.getSystemInfoSync()
			this.wh = sys.windowHeight - 350

		},

	}
</script>

<style scoped lang="scss">
	.center {
		background-color: rgb(242, 242, 242);
		height: 100vh;

		h4 {
			text-align: center;
			margin-top: 40rpx;
			padding: 15rpx;
		}

		.orderInfo {
			margin-left: 4rpx;
			padding: 5rpx 0;

			p {
				padding-left: 10rpx;
			}
		}
	}

	.table {
		// border: 1rpx solid #dadada;
		border-right: 0;
		border-bottom: 0;
		width: 98%;
		margin-left: 1%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
	}

	.tr {
		width: 100%;

		display: flex;
		justify-content: center;
	}

	.th,
	.td {
		padding: 10rpx;
		box-sizing: border-box;
		// border-bottom: 1rpx solid #dadada;
		// border-right: 1rpx solid #dadada;
		background-color: #fff;
		border: 1rpx solid #dadada;
		text-align: center;
	}

	.th3,
	.td3 {
		width: 30%;
	}

	.th {
		font-weight: 800;
		background-color: rgba(48, 144, 255, 0.3);
		font-size: 28rpx;
		color: #333;
	}

	.td {
		font-size: 26rpx;
		color: #333;
	}

	.contain-ten {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		justify-content: space-around;
		margin-bottom: 30rpx;

		button {
			width: 40%;
		}
	}
</style>